<template>
  <div class="personal-container">
    <!-- 导航栏 -->
    <van-nav-bar title="个人中心" />

    <!-- 用户信息区 -->
    <div class="user-info">
      <div class="avatar">
        <img src="/src/assets/default-avatar.png" alt="用户头像" class="avatar-img" />
      </div>
      <div class="user-details">
        <h3 class="nickname">{{ username || '未设置昵称' }}</h3>
        <p class="email">邮箱：{{ email || '未知' }}</p>
        <p class="gongde">
          <van-icon name="warning-o" color="#ff9a00" size="12px" /> 
          今日功德 {{ todayGongde }} | 
          <span @click="gotoGongde">我的功德 {{ myGongde }} ></span>
        </p>
      </div>
    </div>
<!-- 功能图标栏 -->
<div class="function-icons">
  <!-- 列数改为6，确保6个图标在同一行 -->
  <van-grid :column-num="6" clickable>
    <van-grid-item icon="comment-o" text="意见反馈" />
    <van-grid-item icon="edit" text="文明公约" />
    <van-grid-item icon="bell-o" text="消息" />
    <van-grid-item icon="document" text="答谢记录" />
    <van-grid-item icon="gift-o" text="接好运" />
    <van-grid-item icon="power-off" text="退出登录" @click="handleLogout" />
  </van-grid>
</div>

    <!-- 投诉单标签页 -->
    <div class="complaint-tabs">
      <van-tabs v-model:active="activeTab">
        <van-tab title="个人投诉单">
          <van-tabs v-model:active="subActiveTab">
            <van-tab title="全部(0)">暂无更多</van-tab>
            <van-tab title="未通过(0)">暂无更多</van-tab>
            <van-tab title="处理中(0)">暂无更多</van-tab>
            <van-tab title="已完成(0)">暂无更多</van-tab>
          </van-tabs>
        </van-tab>
        <van-tab title="集体投诉单">暂无数据</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const router = useRouter();

// 计算属性
const username = computed(() => userStore.username);
const email = computed(() => userStore.email);

// 模拟功德数据
const todayGongde = 0;
const myGongde = 50;

// 跳转到功德页面
const gotoGongde = () => {
  router.push('/gongde');
};

// 退出登录方法
const handleLogout = () => {
  userStore.logout(); // 调用退出函数
  router.push({ name: 'login' }); // 跳转到登录页
}

// 页面加载时获取用户信息
onMounted(() => {
  userStore.getLoginUser();
});
</script>

<style lang="scss" scoped>
.personal-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: white;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.avatar {
  margin-right: 15px;
}

.avatar-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.email {
  font-size: 14px;
  color: #666;
  margin: 4px 0;
}

.gongde {
  font-size: 12px;
  color: #ff9a00;
  margin-top: 4px;
}

.function-icons {
  padding: 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.complaint-tabs {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
}

.van-tabs__nav {
  background-color: transparent;
  border-bottom: 1px solid #e5e5e5;
}

.van-tabs__title {
  font-size: 16px;
  color: #333;
}

.van-tabs__title--active {
  color: #ff9a00;
  font-weight: bold;
}

.van-tab__pane {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>